<template>
    <h3>地址列表</h3>
    <el-table :data="userAddressData" style="width: 100%">
        <el-table-column prop="userid" label="用户ID" />
        <el-table-column prop="name" label="用户姓名" />
        <el-table-column prop="tel" label="电话号码" />
        <el-table-column prop="city" label="城市" />
        <el-table-column prop="county" label="区" />
        <el-table-column prop="province" label="省" />
        <el-table-column label="是否是默认地址">
            <template #default="scope">
                <span>{{ scope.row.isDefault ? "是" : "否" }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="addressDetail" label="详细地址" />
        <el-table-column prop="addressid" label="地址ID" />
    </el-table>
</template>
<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import { ref, reactive } from 'vue';
import service from '../../../utils/service';


// 获取地址列表
interface IUserAddressData {
    "name": string,
    "tel": string,
    "city": string,
    "county": string,
    "province": string,
    "isDefault": boolean,
    "addressDetail": string,
    "userid": string,
    "addressid": string
}
const userAddressData = reactive<IUserAddressData[]>([])


const getUserAddressData = () => {
    service({
        url: `/address/list`
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            userAddressData.length = 0
            userAddressData.push(...res.data.data)
        }
    })
}
getUserAddressData()
</script>

<style scoped>
h3 {
    margin-bottom: 10px;
}

.img {
    width: 200px;
    height: 150px;
}
</style>